<template>
	<div class="address-page-layout">
		<div class="address-page-head-bar">
			<div class="address-page-head-bar-return-btn" @click="page_back">
				<b-icon-chevron-compact-left />
			</div>
			<div class="address-page-head-bar-title">我的收货地址</div>
			<div class="address-page-head-bar-right-btn" @click="new_address">
				<b-icon-plus-circle />
			</div>
		</div>
		<div class="address-page-content">
			<b-card class="address-list-item" border-variant="light" v-for="(item, index) in address_list" :key="index">
				<div class="address-list-item-flexbox">
					<div class="address-list-item-content">
						<div class="address-list-item-content-address">{{ item.address }}</div>
						<div class="address-list-item-content-name">{{ item.name }}</div>
						<div class="address-list-item-content-telphone">{{ item.tel }}</div>
					</div>
					<div class="address-list-item-btn">
						<div @click="edit_current_address(index)">
							<b-icon-pencil-square />
						</div>
						<div style="color: red" @click="delete_address(index)">
							<b-icon-trash />
						</div>
					</div>
				</div>
			</b-card>
		</div>
		<EditAddress v-bind.sync="edit_address" />
	</div>
</template>

<script>
	import {BIcon, BIconChevronCompactLeft, BIconPlusCircle, BIconPencilSquare, BIconTrash} from 'bootstrap-vue'
	import EditAddress from '../Public/EditAddress.vue'
	
	
	export default {
		data(){
			return {
				address_list: [],
				edit_address: {
					show: false,
					type: 'new',
					item: {}
				}
			}
		},
		components:{
			EditAddress,
			BIcon,
			BIconChevronCompactLeft,
			BIconPlusCircle,
			BIconPencilSquare,
			BIconTrash
		},
		mounted() {
			this.fetch_list()
		},
		methods: {
			page_back(){
				this.$router.back()
			},
			fetch_list(){
				this.$axios.get('/address/list').then(resp => {
					if(resp.ret == 0){
						if(resp.data != null && resp.data.length > 0)
							this.address_list = this.address_list.concat(resp.data)
					}
				})
			},
			new_address(){
				this.edit_address.type = 'new'
				this.edit_address.show = true
			},
			edit_current_address(index) {
				this.edit_address.type = 'edit'
				this.edit_address.item = this.address_list[index]
				this.edit_address.show = true
			},
			delete_address(index){
				this.$axios.get("/address/remove", {params: {id: this.address_list[index].id}}).then(resp => {
					if(resp.ret == 0) this.address_list.splice(index, 1)
				})
			}
		}
	}
</script>

<style>
	.address-page-layout {
		position: relative;
		padding-top: 3rem;
	}
	.address-page-head-bar {
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 20;
		height: 3rem;
		background-color: #FFFFFF;
		border-bottom: 0.0625rem solid #EEEEEE;
	}
	.address-page-head-bar-return-btn {
		display: inline-block;
		width: 3rem;
		height: 3rem;
		font-size: 1.25rem;
		line-height: 3rem;
		text-align: center;
		cursor: pointer;
	}
	.address-page-head-bar-title {
		display: inline-block;
		width: calc(100% - 6rem);
		height: 3rem;
		font-size: 1.25rem;
		line-height: 3rem;
		text-align: center;
		color: #666666;
	}
	.address-page-head-bar-right-btn {
		display: inline-block;
		width: 3rem;
		height: 3rem;
		font-size: 0.9375rem;
		line-height: 3rem;
		text-align: center;
		color: #666666;
		user-select: none;
		cursor: pointer;
	}
	.address-page-content {
		height: calc(100vh - 60px - 3rem);
		padding: 0.9375rem;
		overflow-y: auto;
	}
	.address-list-item {
		margin-bottom: 0.9375rem;
	}
	.address-list-item-flexbox {
		display: flex;
		flex-direction: row;
	}
	.address-list-item-content {
		width: calc(100% - 3rem);
	}
	.address-list-item-content-address {
		font-size: 1.25rem;
		margin-bottom: 0.9375rem;
	}
	.address-list-item-content-name, .address-list-item-content-telphone {
		display: inline-block;
		margin-right: 0.625rem;
		color: #666
	}
	.address-list-item-btn {
		width: 3rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 1.25rem;
		color: #666666;
		user-select: none;
		cursor: pointer;
	}
	.address-list-item-btn div {
		height: 1.5rem;
		line-height: 1.5rem;
		margin: 0.5rem;
	}
</style>
